<template>
	<view class="mh100 bf">
		<view class="p3 f-y-c">
				<view class="top1s bf6 f-s-c c9">
					<text class="iconfont iconss f28"></text>
					<u-input class="top1si f24" style="width: 500rpx;"
					 v-model="params.keyword" focus trim placeholder="搜索商品名称"
					 confirm-type='search'
					 @input="confirm" />
				</view>
			<view @click="go({t:4})" class="f-g-0 c8 ml30">取消</view>
		</view>
		<view v-if="!issearch" class="p03">
			<view class="p30 f-x-bt">
				<view class="wei">搜索历史</view>
				<view @click="clear" class="f-y-c p2">
					<text class="iconfont iconshanchu c3"></text>
				</view>
			</view>
			<view class="f-raw">
				<block v-for="(v,i) in history" :key="i">
					<view @click="setKey(v)" class='f26 bf2f mr20 mb20 c3 lstag'>{{v}}</view>
				</block>
			</view>
		</view>
		
		
		<view :id="`r${si}`" v-for="(co, si) in dataList" :key="co.id" class="conw2 f-row p2">
			<view class="f-g-0 left bs10 p-r">
				<mg-img cname="wh" :src="co.icon" />
				<view v-if="co.stock <= 0" class="p-a ysq f-c b0 cf w100 f22">已售罄</view>
				<view v-if="co.isRecommend == 1" class="p-a sptj f20">推荐</view>
				<view v-if="co.display == 2" class="p-a yxj f-c udlr c0 w100 f22">已下架</view>
			</view>
			<view class="f-g-1 ml20 f24 c6">
				<view @click="bjsp(co)" class="f-y-c">
					<view class="f-1 f30 t-o-e c0">{{ co.name }}</view>
					<text class="iconfont iconright1 f26 c6"></text>
				</view>
				<view class="mt10 f-raw">
					<text class="mr30">销量{{ co.salesNum }}</text>
					<text v-if="co.isSpecs == 1">多规格</text>
					<text v-else class="mr30">库存{{ co.stock }}</text>
				</view>
				<view @click="idxHorizontal != 5 && jgkc({ co, t: 1 })" class="crb f32 f-y-c">
					<text>{{ sl + co.price }}</text>
					<text v-if="co.isSpecs != 1 && idxHorizontal != 5"
						class="iconfont iconbj ml10"></text>
				</view>
				<view class="f-x-e c0">
					<block v-if="idxHorizontal != 5">
						<view @click="jgkc({ co, t: 2 })"
							v-if="co.display != 2 && co.isSpecs != 1" class="czbtn b-d">库存
						</view>
						<block v-if="co.isSpecs != 1">
							<view @click="spcz({ co, t: 'gq' })" class="czbtn b-d">估清</view>
							<view @click="spcz({ co, t: 'zm' })" class="czbtn b-d">置满</view>
						</block>
						<view v-if="idxHorizontal != 5" @click="spcz({ co, t: 'sj' })"
							class="czbtn b-l-mt">{{ co.display == 1 ? '下' : '上' }}架</view>
					</block>
					<view @click="spcz({ co, t: 'hf' })" v-if="idxHorizontal == 5 && (co.isMain==1||co.goodsModel==3)" class="czbtn b-d">恢复
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="issearch">
			<jzz :nodata="dataList.length==0&&isget" :mygd='mygd' />
		</view>
		<mg-modal :ismr="true" v-model="showJgkc" width="650rpx" :z-index="3000">
			<view class="bs10 bf p-r">
				<text @click="showJgkc = false" class="ggx p-a iconfont iconcuo f50 c9"></text>
				<view class="p20 ggh f-c f32">
					<view class="t-o-e t-c" style="width: 80%;">编辑</view>
				</view>
				<view class="ggb">
					<mg-input v-if="jgkctype == 1" cname="p23" t="number" v-model="jgparams.price" isr="1" ht="价格"
						htc="f30" pr="请输入" icn="f30" />
					<mg-input v-if="jgkctype == 2" cname="p23" t="number" v-model="jgparams.stock" isr="1" ht="库存"
						htc="f30" pr="请输入" icn="f30" />
				</view>
				<button class="foot-btn3 b-l-mt w33" @click="save" :disabled="loading" :loading="loading"
					style="margin: 30rpx auto;" hover-class="btnhc">确定</button>
			</view>
		</mg-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		getDw,
	} from "@/common/wechat-util.js"
	import jzz from '@/components/common/jzz.vue'
	import utils from '@/common/utils.js'
	import mgModal from '@/components/common/modal.vue';
	import mgInput from '@/components/form/mg-input.vue';
	export default {
		name: 'order-index',
		components: {
			jzz,
			mgModal,
			mgInput
		},
		data() {
			return {
				sjqx:0,
				loading:false,
				showJgkc:false,
				jgkctype:'',
				idxHorizontal:0,
				query: {},
				history: [],
				key: "",
				issearch: false,
				dataList: [],
				isget: false,
				mygd: false,
				params: {
					size:10,
					page:1
				},
				jgparams: {
					price: '',
					stock: ''
				},
			}
		},
		async onLoad(options) {
			uni.getStorageSync('searchHistory') || uni.setStorageSync('searchHistory', [])
			this.history = uni.getStorageSync('searchHistory')
			if(options.keyword){
				this.params.keyword = options.keyword
				this.confirm()
			}
			this.sjqx = options.sjqx
		},
		onReachBottom() {
			if (!this.mygd && this.isget) {
				this.isget = false
				this.getList();
			}
		},
		methods: {
			setKey(v) {
				this.params.keyword = v
				this.confirm()
			},
			cleanKey() {
				this.params.keyword = ''
				this.issearch = false
				this.isget = false
				this.mygd = false
				this.params.page = 1
				this.dataList = []
			},
			async clear() {
				try {
					await this.util.modal(`确认清空搜索历史吗？`)
					this.history = []
					uni.removeStorageSync('searchHistory')
				} catch (e) {
					//TODO handle the exception
				}
			},
			confirm:utils.debounce(function(e) {
				if (!this.params.keyword){
					// this.util.message('请输入搜索内容', 3)
					return this.cleanKey() 
				}
				this.issearch = true
				this.isget = false
				this.mygd = false
				this.params.page = 1
				this.dataList = []
				this.getList()
				this.setHistory()
			}, 300),
			async getList() {
				let {
					data
				} = await this.util.request({
					'url': this.api.selectGood,
					method: 'POST',
					data: {
						keyword :this.params.keyword
					}
				})
				this.dataList = this.dataList.concat(data)
				this.isget = true
				this.mygd = this.params.size > data.length
				this.params.page++
			},
			setHistory() {
				let h = uni.getStorageSync('searchHistory')
				if (h.findIndex(v => v == this.params.keyword) == -1) {
					h.push(this.params.keyword)
					uni.setStorageSync('searchHistory', h)
				}
				this.history = uni.getStorageSync('searchHistory')
			},
			async save() {
				let arr = this.jgkctype == 1 ? ['stock'] : ['price'];
				let judgeData = utils.isFailParams({
					field: this.jgparams,
					filter: arr,
					tips: {
						price: '请输入价格',
						stock: '请输入库存'
					}
				});
				if (!judgeData) {
					return;
				} else {
					this.loading = true;
					this.showloading = true;
					// return
					let p = {
						id: this.goodsInfo.id
					};
					if (this.jgkctype == 1) {
						p.price = this.jgparams.price;
					} else if (this.jgkctype == 2) {
						p.stock = this.jgparams.stock;
					}
					try {
						let res = await this.util.request({
							url: this.api.spcz,
							method: 'POST',
							data: p
						});
						if (res) {
							this.util.message('保存成功', 1, 1000);
							this.showJgkc = false;
							utils.stfn(() => {
								this.confirm();
							});
						}
					} catch (e) {}
					this.showloading = this.loading = false;
				}
			},
			async spcz(e) {
				this.goodsInfo = e.co;
				let obj = {};
				switch (e.t) {
					case 'sj':
						obj = {
							title: `您确认${e.co.display == 1 ? '下架' : '上架'}商品-${e.co.name}吗？`,
							url: 'spcz',
							params: {
								id: e.co.id,
								type: e.co.display == 1 ? 2 : 1
							}
						};
						break;
					case 'gq':
						if (this.sjqx == 2) return this.util.message('暂无权限', 3)
						obj = {
							title: `您确认估清商品-${e.co.name}吗？`,
							url: 'spcz',
							params: {
								id: e.co.id,
								type: 3
							}
						};
						break;
					case 'zm':
						if (this.sjqx == 2) return this.util.message('暂无权限', 3)
						obj = {
							title: `您确认置满商品-${e.co.name}吗？`,
							url: 'spcz',
							params: {
								id: e.co.id,
								type: 4
							}
						};
						break;
					case 'hf':
						obj = {
							title: `您确认恢复商品-${e.co.name}吗？`,
							url: 'spcz',
							params: {
								id: e.co.id,
								type: 8
							}
						};
						break;
				}
				try {
					await this.util.modal(obj.title);
				} catch (e) {
					return;
				}
				this.showloading = true;
				try {
					let data = await this.util.request({
						url: this.api[obj.url],
						method: 'POST',
						data: obj.params
					});
					if (data) {
						this.util.message('操作成功', 1);
						utils.stfn(() => {
							this.confirm();
						});
					}
				} catch (e) {}
				this.showloading = false;
			},
			jgkc(e) {
				if (this.sjqx == 2) return this.util.message('暂无权限', 3)
				this.goodsInfo = e.co;
				if (e.co.isSpecs == 1) {} else {
					this.jgparams.price = e.co.price;
					this.jgparams.stock = e.co.stock;
					this.showJgkc = true;
					this.jgkctype = e.t;
				}
			},
			glfl() {
				this.go({
					url: '../spgl/flsz?type=' + (this.tarrIdx == 1 ? 2 : 1)
				})
			},
			djTab(msg) {
				if (msg.url = 'fbsp') {
					this.go({
						url: '../spgl/fbsp?type=' + (this.tarrIdx == 1 ? 2 : 1)
					})
				}
			},
			bjsp(v) {
				if (this.sjqx != 1 && this.sjqx != 4) return this.util.message('暂无权限', 3)
				this.go({
					url: '../spgl/fbsp?type=' + (this.tarrIdx == 1 ? 2 : 1) + '&id=' + v.id
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import '../goods/goods.scss';
	.top1s {
			width: 700rpx;
			height: 65rpx;
			border-radius: 40rpx;
			padding: 6rpx 20rpx;
			.top1si {
				margin-left: 10rpx;
			}
		}
	.lstag {
		padding: 16rpx 26rpx;
		border-radius: 50rpx;
		line-height: 28rpx;
	}
</style>
